<template>
    <div class="hospital-warrper">
        <el-card class="box-card">
            <div class="name">
                <div>
                    <b>科室名称</b>
                    <el-input class="w-50 m-2" placeholder="输入科室名称" v-model="data.searchData" :prefix-icon="Search" />
                    <el-button type="primary" @click="searchDepartment" :icon="Search">查询</el-button>
                </div>
                <div class="delete-all">
                    <el-button style="width: 80px;" @click="checkDel">删除选中</el-button>
                </div>
            </div>
            <!-- 科室列表 -->
            <div class="list">
                <el-table :data="data.tableData" :border="true" style="width: 100%" @selection-change="getCheckId">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="科室编号" />
                    <el-table-column prop="createtime" label="科室创建时间" />
                    <el-table-column prop="name" label="科室名称" />
                    <el-table-column prop="maindoctor" label="科室主任" />
                    <el-table-column label="科室操作">
                        <template #default="scope">
                            <el-button type="primary" :icon="Delete" link circle @click="openDelDialog(scope.row)" />
                            <el-button type="primary" :icon="Edit" link circle @click="openEditDialog(scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页器 -->
            <el-pagination background v-model:current-page="data.pageinfo.page" v-model:page-size="data.pageinfo.size"
                :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager, next, jumper" :total="data.total" />
        </el-card>
        <!-- 删除 对话框 -->
        <el-dialog v-model="data.dialogVisible" title="系统提示" width="30%">
            <span><b>您正在进行科室删除操作，此操作不可逆，确定要删除对应科室吗？</b></span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="delDepartment">
                        确认删除
                    </el-button>
                    <el-button @click="data.dialogVisible = false">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑功能 对话框 -->
        <el-dialog v-model="data.editDialog" title="编辑科室" width="30%">
            <el-form :inline="true" :model="data.editData" class="demo-form-inline">
                <el-form-item label="科室名称">
                    <el-input v-model="data.editData.name" placeholder="请输入科室名称" />
                </el-form-item><br>
                <el-form-item label="科室主任">
                    <el-select v-model="data.editData.maindoctor" placeholder="请选择科室主任">
                        <el-option v-for="item in data.departmentDirectorList" :key="item.id" :label="item.name"
                            :value="item.name" />
                    </el-select>
                </el-form-item><br>
                <el-form-item label="科室编号">
                    <el-input v-model="data.editData.id" placeholder="请输入科室名称" disabled />
                </el-form-item><br>
                <el-form-item label="创建时间">
                    <el-input v-model="data.editData.createtime" placeholder="请输入科室名称" disabled />
                </el-form-item><br>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="editDepartment">确认编辑</el-button>
                    <el-button @click="data.editDialog = false">取消编辑</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { Search, Edit, Delete } from '@element-plus/icons-vue'
import { delDepartmentReq, editDepartmentReq, getDepartmentListReq, searchDepartmentReq,doctorDoctornamesReq,batchdelDepartmentReq } from "@/api/department/department"
import { watchEffect, reactive } from 'vue';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';

//定义数据
const data = reactive({
    //每一页的数据
    pageinfo: {
        page: 1,
        size: 10
    },
    //表格数据
    tableData: [],
    //编辑数据
    editData: {
        name: '',
        id: '',
        createtime: '',
        maindoctor: ''
    },
    //编辑功能对话框显隐
    editDialog: false,
    //控制对话框显隐
    dialogVisible: false,
    //删除单个科室
    departmentId: null,
    //搜索数据
    searchData: null,
    //删除选中项

    //总数据
    total: null,
    //所有科室主任列表
    departmentDirectorList:[]
})

//获取数据列表
const getList = async () => {
    const res = await getDepartmentListReq({ page: data.pageinfo.page, size: data.pageinfo.size })
    res.data.data.forEach(item => item.createtime = dayjs(item.createtime).format('YYYY-MM-DD'))
    data.total = res.data.total
    data.tableData = res.data.data
}

//获取所有科室主任 列表
const getDepartmentDirectorList = async () => {
    const res = await doctorDoctornamesReq()
    data.departmentDirectorList = res.data.data
    console.log(res);
    
}

//删除单个科室
const openDelDialog = (row) => {
    data.departmentId = row.id
    data.dialogVisible = true
}

const delDepartment = async () => {
    const res = await delDepartmentReq({ id: data.departmentId })
    data.dialogVisible = false
    if (res.data.code === 1) {
        ElMessage({
            message: '数据删除成功',
            type: 'success'
        })
    } else {
        ElMessage.error('数据删除失败')
    }
    getList()
    console.log(res);
}

//编辑单个科室
const openEditDialog = (row) => {
    data.editDialog = true
    data.editData = row
}

const editDepartment = async () => {
    const res = await editDepartmentReq(data.editData)
    data.editDialog = false
    if (res.data.code === 1) {
        ElMessage({
            message: '数据修改成功',
            type: 'success'
        })
    } else {
        ElMessage.error('数据修改失败')
    }
    getList()
    console.log(res);
}

//查询功能
const searchDepartment = async () => {
    const res = await searchDepartmentReq({ page: data.pageinfo.page, size: data.pageinfo.size, name: data.searchData })
    res.data.data.forEach(item => item.createtime = dayjs(item.createtime).format('YYYY-MM-DD'))
    if (res.data.code === 1) {
        ElMessage.success('查询成功')
    } else {
        ElMessage.error('查询失败')
    }
    data.tableData = res.data.data
    console.log(res);
}


//批量删除

let checkIds = []

const getCheckId = (val) => {
    checkIds = []
    if(val){
        val.forEach(item => {
            checkIds.push(item.id)
        })
    }
}

const checkDel = async () => {
    const res = await batchdelDepartmentReq({ids:`${JSON.stringify(checkIds)}`})
    if (res.data.code === 1) {
        ElMessage.success('批量删除成功')
    } else {
        ElMessage.error('批量删除失败')
    }
    getList()
}


watchEffect(getList)
watchEffect(getDepartmentDirectorList)
</script>

<style scoped lang="scss">
.hospital-warrper {
    .name {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        margin-left: 20px;

        .el-input {
            margin-left: 20px;
            width: 300px;
        }

        .el-button {
            margin-left: 20px;
        }
    }

    .list {
        margin-top: 40px;
        margin-left: 20px;

        .el-table__header-wrapper {
            --el-table-th-bg-color: var(#f2f6fc)
        }

        .el-button--primary {
            margin-left: 0;
        }
    }

    .el-pagination {
        margin-top: 20px;
        margin-left: 20px;
    }
}
</style>